<template>
	<view class="feePlane">
		<view class="fee-section1">
			<view class="flexBox">
				<view class="flexLeft fee-black-font-left fee-gray-font">Balance:</view>
				<view class="flexRight fee-black-font-right text-red">{{ user_money }}</view>
			</view>
		</view>
		<view class="padding">
			<view class="flexBox">
				<view class="flexLeft"><text class="fee-black-font-left fee-gray-font">Order Amount:</text></view>
				<view class="flexRight text-orange">
					 
					<text>{{ goods_price }}</text>
				</view>
			</view>
			<view class="flexBox" style="margin-top: 4px;">
				<view class="flexLeft"><text class="fee-black-font-left fee-gray-font">Commission:</text></view>
				<view class="flexRight text-orange">
					 
					<text>{{ total_amount }}</text>
				</view>
			</view>
			<view class="flexBox" style="margin-top: 4px;">
				<view class="flexLeft"><text class="fee-black-font-left">Total return:</text></view>
				<view class="flexRight text-uv">
					 
					<text class="text-bold text-xl">{{ estimated_return }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		total_amount: {
			type: Number,
			default: 0
		},
		goods_price: {
			type: String,
			default: '1'
		},
		user_money: {
			type: Number,
			default: 0
		}
	},
	computed: {
		estimated_return() {
			return parseFloat(this.total_amount) + parseFloat(this.goods_price);
		}
	}
};
</script>

<style lang="less">
.feePlane {
	background: #fff;
	margin-bottom: 152px;
	border-radius: 5px;
	/* box-shadow: rgba(150, 148, 147, 0.3) 0px 0px 10px; */
	margin-left: 14px;
	margin-right: 14px;
}
.fee-section1 {
	padding: 19px 14px 9px 14px;
	border-bottom: 1px solid #f8f8f8;
}
.padding {
	padding: 14px;
}
.flexBox {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
}
.fee-gray-font {
	font-size: 13px;
	line-height: 13px;
	color: #999;
}
.fee-black-font-right {
	font-size: 13px;
	line-height: 13px;
	color: #262626;
}
.fee-black-font-left {
	font-size: 13px;
	line-height: 13px;
	color: #333;
}
.flexBox {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
}
.fee-gray-font {
	font-size: 13px;
	line-height: 13px;
	color: #999;
}
.line-orange,
.lines-orange,
.text-orange {
	color: #f37b1d;
}
.line-uv,
.lines-uv,
.text-uv {
	color: #7669fd;
}
.text-bold {
	font-weight: 700;
}
.text-xl {
	font-size: 17px;
}
</style>
